<template>
  <div class="app-container">

    <el-row :gutter="20">
      <el-col :span="6">
        <el-card class="box-card">
          <div slot="header" class="box_header">
            <span>地区列表</span>
          </div>

           <el-tree
            ref="treeRef"
           :data="cityAreaData"
            :props="{children: 'children',label: 'areaName'}"
            :expand-on-click-node="false"
            :highlight-current="true"
            node-key="areaCode"
            :current-node-key="currentNodekey"
           @node-click="cityAreaNodeClick"></el-tree>
        </el-card>
      </el-col>

      <!-- 右边列表 -->
      <el-col :span="18">

        <el-form :model="queryParam" ref="queryForm" size="small" :inline="true"  label-width="68px">
          <el-form-item label="审批类型" prop="shengpiCategoryId">
            <el-select v-model="queryParam.shengpiCategoryId" clearable placeholder="请选择">
               <el-option
                 v-for="item in shengpiCategory"
                 :key="item.id"
                 :label="item.name"
                 :value="item.id">
               </el-option>
             </el-select>
          </el-form-item>

          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="btnSearch">搜索</el-button>

             <el-button
              type="primary"
              plain
              icon="el-icon-plus"
              size="mini"
              @click="handleAdd"
              v-hasPerm="['xmsp:project:add']"
            >新增</el-button>
          </el-form-item>
        </el-form>


        <el-table :data="tableData.rows" border style="width: 100%"  >
          <el-table-column type="expand" >
            <template slot-scope="props">
              <el-form label-position="left" inline class="expand-padding"  >
                <el-form-item label="项目内容">
                  <span>{{ props.row.projectName }}</span>
                </el-form-item>

              </el-form>
            </template>
          </el-table-column>
           <el-table-column label="编号" width="200"  align="center" prop="id" />
           <el-table-column label="区域名称"   align="left" prop="areaName" :show-overflow-tooltip="true" />
           <el-table-column label="分类名称" prop="shengpiCategoryName"   align="left" :show-overflow-tooltip="true" />



           <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
             <template slot-scope="scope">
               <el-button
                 size="mini"
                 type="text"
                 icon="el-icon-edit"
                 @click="handleUpdate(scope.row)"
                 v-hasPerm="['xmsp:project:edit']"
               >修改</el-button>
               
               <el-button
                 size="mini"
                 type="text"
                 icon="el-icon-edit"
                 @click="handleUpdate(scope.row)"
                 v-hasPerm="['xmsp:project:edit']"
               >办事指南</el-button>
             </template>
           </el-table-column>
         </el-table>

        <el-pagination v-if="tableData.total>0" :current-page="queryParam.page" :page-sizes="[10, 20,30,50]"
          :page-size="queryParam.size" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total"
          @size-change="handleSizeChange" @current-change="handleCurrentChange" />





      </el-col>
    </el-row>

    <!-- 添加或修改参数配置对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="600px" append-to-body :close-on-click-modal="false"
       :before-close="cancelForm">
        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
          <el-form-item label="区域" prop="areaCode">
              <treeselect
                v-model="form.areaCode"
                :options="areaOptions"
                :normalizer="normalizer"
                :show-count="true"
                placeholder="选择区域"
                @select="areaTreeSelect"
              />

          </el-form-item>
          <el-form-item label="审批类型" prop="shengpiCategoryId">
           <el-select v-model="form.shengpiCategoryId" clearable placeholder="请选择">
              <el-option
                v-for="item in shengpiCategory"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="项目内容" prop="projectName">
            <el-input v-model="form.projectName" type="textarea"  :rows="6" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancelForm">取 消</el-button>
        </div>
      </el-dialog>
    </div>



  </div>
</template>

<script>
  import {dataListApi as categoryListApi } from '@/api/xmsp/category.js'
  import {dataListApi,addApi,editApi,findByIdApi } from '@/api/xmsp/project.js'
  import {provinceAPI} from '@/api/cityArea.js'
  import PageMinix from '@/mixin/PageMixin.js'
  import AddOrEditMixin from '@/mixin/AddOrEditMixin.js'
  import DictDataMinix from '@/mixin/DictDataMinix.js'
  import Treeselect from "@riophae/vue-treeselect";
  import "@riophae/vue-treeselect/dist/vue-treeselect.css";
  export default {
      mixins: [DictDataMinix, PageMinix, AddOrEditMixin],
      dicts: [],
      components: { Treeselect },
      data() {
        return {
          fetchDataApi: dataListApi,
          addApi: addApi,
          editApi: editApi,
          // deleteByIdApi: deleteApi,
          findByIdApi: findByIdApi,
          primaryKey: 'id',
          cityAreaData:[],
          shengpiCategory:[],
          //默认选中的节点
          currentNodekey: '',
          // 重庆省
          chongProvince: '500000',
          // 省市区树型菜单
          areaOptions: [],
          // 表单校验
          rules: {
            areaCode: [
              { required: true, message: "区域不能为空", trigger: "blur" }
            ],
            shengpiCategoryId: [
              { required: true, message: "审批类型不能为空", trigger: "blur" }
            ],
            projectName: [
              { required: true, message: "项目内容不能为空", trigger: "blur" }
            ]
          }
        }
      },
      methods: {
       initFormValue() {
         this.form = {
         }
       },
       // 初始化查询参数的值
       initQueryParam(){
         if(!this.currentNodekey){
           this.queryParam.areaCode = this.chongProvince
         }
       },
       // 导出excel
       handleExport(){

       },
       //读取其它信息
       loadOtherData(){
         // 加载重庆市省信息
         provinceAPI( this.chongProvince).then(resp=> {
           this.cityAreaData = resp.data
           this.areaOptions= resp.data
           if (this.cityAreaData.length > 0) {
             // 默认选中重庆市
               this.currentNodekey = this.cityAreaData[0].areaCode
               this.$nextTick(() => {
                 this.$refs.treeRef.setCurrentKey(this.currentNodekey)
                 this.$refs.treeRef.store.nodesMap[this.currentNodekey].expanded = true
              })

             }
         })

         //加载分类
         categoryListApi({page:1,size:9999}).then(resp=> {
           this.shengpiCategory = resp.data.rows
         })
       },
       // 点击左边城市树
       cityAreaNodeClick(row){
         const areaCode= row.areaCode
         if(this.queryParam.areaCode){
           if(this.queryParam.areaCode!== areaCode){
             this.$set( this.queryParam, 'areaCode', areaCode )
             this.$set( this.queryParam, 'page', 1 )

             this.currentNodekey = areaCode
              this.$nextTick(() => {
                this.$refs.treeRef.setCurrentKey(this.currentNodekey)
                this.$refs.treeRef.store.nodesMap[this.currentNodekey].expanded = true
             })

             //重新设置查询城市编号
             this.fetchData()

           }
         }else{
           this.$set( this.queryParam, 'areaCode', areaCode )
           this.$set( this.queryParam, 'page', 1 )

           this.currentNodekey = areaCode
            this.$nextTick(() => {
              this.$refs.treeRef.setCurrentKey(this.currentNodekey)
              this.$refs.treeRef.store.nodesMap[this.currentNodekey].expanded = true
           })
           this.fetchData()
         }
       },
       /** 转换菜单数据结构 */
       normalizer(node) {
         if (node.children && !node.children.length) {
           delete node.children;
         }
         return {
           id: node.areaCode,
           label: node.areaName,
           children: node.children
         };
       },
       // 当选中一个县市区的时候
       areaTreeSelect(row){
          this.$set( this.form, 'areaName', row.areaName )
       }

      },
      created(){
        this.loadOtherData()
        this.initFormValue()
      }
    }
</script>

<style  >


/* 点击树结构项的选中颜色 */
.el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
  background-color: #409EFF !important;
  color:#fff;
}

.expand-padding{
  padding:0 20px;
}
</style>
